﻿<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>商品详情</title>
    <!--    公共片段头部-->
    <th:block th:insert="~{front/include::head}"></th:block>
</head>

<body>
<!-- Quick view -->
<div th:replace="~{front/include::quickView}"></div>
<header th:replace="~{front/include::header}"></header>
<main class="main">
    <div class="page-header breadcrumb-wrap">
        <div class="container">
            <div class="breadcrumb">
                <a th:href="@{/vm/front/index}" rel="nofollow">主页</a>
                <span>
                   <a th:href="@{/vm/front/goods/grid}" rel="nofollow"> 商品</a>
               </span>
                <span></span> 详情
            </div>
        </div>
    </div>
    <section class="mt-50 mb-50">
        <div class="container">
            <div class="row">
                <div class="col-lg-9" style="width: 1100px">
                    <div class="product-detail accordion-detail">
                        <div class="row mb-50">
                            <div class="col-md-6 col-sm-12 col-xs-12">
                                <div class="detail-gallery">
                                    <!--                                    zoom缩放-->
                                    <span class="zoom-icon"><i class="fi-rs-search"></i></span>
                                    <!-- MAIN SLIDES -->
                                    <div class="product-image-slider">
                                        <!--                                        加个主图-->
                                        <figure class="border-radius-10">
                                            <img th:src="@{/assets/{url}(url=${goods.pic})}" alt="product image">
                                        </figure>
                                        <!--                                        详细图片-->
                                        <th:block th:if="${!goods.otherPics.isEmpty()and goods.otherPics.size() > 1}">
                                            <figure class="border-radius-10" th:each="pic:${goods.otherPics}">
                                                <img th:src="@{/assets/{url}(url=${pic})}" alt="product image">
                                            </figure>
                                        </th:block>
                                    </div>
                                    <!-- THUMBNAILS 观马灯,遍历细节图-->
                                    <div class="slider-nav-thumbnails pl-15 pr-15">
                                        <!--                                        主图-->
                                        <div>
                                            <img th:src="@{/assets/{url}(url=${goods.pic})}" alt="product image">
                                        </div>
                                        <!--                                        详细图片-->
                                        <th:block th:if="${!goods.otherPics.isEmpty()and goods.otherPics.size() > 1}">
                                            <div th:each="pic:${goods.otherPics}">
                                                <img th:src="@{/assets/{url}(url=${pic})}" alt="product image">
                                            </div>
                                        </th:block>
                                    </div>
                                </div>
                                <!-- End Gallery -->
                                <div class="social-icons single-share">
                                    <ul class="text-grey-5 d-inline-block">
                                        <li><strong class="mr-10">分享:</strong></li>
                                        <li class="social-facebook"><a href="#"><img
                                                th:src="@{/assets/front/imgs/theme/icons/icon-facebook.svg}" alt=""></a>
                                        </li>
                                        <li class="social-twitter"><a href="#"><img
                                                th:src="@{/assets/front/imgs/theme/icons/icon-twitter.svg}" alt=""></a>
                                        </li>
                                        <li class="social-instagram"><a href="#"><img
                                                th:src="@{/assets/front/imgs/theme/icons/icon-instagram.svg}"
                                                alt=""></a></li>
                                        <li class="social-linkedin"><a href="#"><img
                                                th:src="@{/assets/front/imgs/theme/icons/icon-pinterest.svg}"
                                                alt=""></a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12 col-xs-12">
                                <div class="detail-info">
                                    <h2 class="title-detail" th:text="${goods.name}"></h2>
                                    <div class="product-detail-rating">
                                        <div class="pro-details-brand">
                                            <span th:text="'品牌:'+${goods.brand==null?'未知':goods.brand.name}">
                                            </span>
                                        </div>
                                        <div class="product-rate-cover text-end">
                                            <div class="product-rate d-inline-block">
                                                <div class="product-rating" style="width:90%">
                                                </div>
                                            </div>
                                            <span class="font-small ml-5 text-muted"> (25条 评价)</span>
                                        </div>
                                    </div>
                                    <div class="clearfix product-price-cover">
                                        <div class="product-price primary-color float-left">
                                            <ins><span class="text-brand"
                                                       th:text="'$'+${goods.price}">$1</span></ins>
                                            <ins><span class="old-price font-md ml-15"
                                                       th:text="'$'+${goods.markPrice}"></span></ins>
                                            <span class="save-price  font-md color3 ml-15"
                                                  th:text=" ${goods.markPrice != null ?
                                                  ((1 - goods.price / goods.markPrice) * 100) + '% Off' :
                                                  '无折扣'}"></span>
                                        </div>
                                    </div>
                                    <div class="bt-1 border-color-1 mt-15 mb-15"></div>
                                    <div class="short-desc mb-30">
                                        <p th:text="${goods.summary}"></p>
                                    </div>
                                    <div class="product_sort_info font-xs mb-30">
                                        <ul>
                                            <li class="mb-10"><i class="fi-rs-crown mr-5"></i> 1 Year AL Jazeera Brand
                                                Warranty
                                            </li>
                                            <li class="mb-10"><i class="fi-rs-refresh mr-5"></i> 30 Day Return Policy
                                            </li>
                                            <li><i class="fi-rs-credit-card mr-5"></i> Cash on Delivery available</li>
                                        </ul>
                                    </div>
                                    <div class="attr-detail attr-color mb-15">
                                        <strong class="mr-10">Color</strong>
                                        <ul class="list-filter color-filter">
                                            <li><a href="#" data-color="Red"><span class="product-color-red"></span></a>
                                            </li>
                                            <li><a href="#" data-color="Yellow"><span
                                                    class="product-color-yellow"></span></a></li>
                                            <li class="active"><a href="#" data-color="White"><span
                                                    class="product-color-white"></span></a></li>
                                            <li><a href="#" data-color="Orange"><span
                                                    class="product-color-orange"></span></a></li>
                                            <li><a href="#" data-color="Cyan"><span
                                                    class="product-color-cyan"></span></a>
                                            </li>
                                            <li><a href="#" data-color="Green"><span class="product-color-green"></span></a>
                                            </li>
                                            <li><a href="#" data-color="Purple"><span
                                                    class="product-color-purple"></span></a></li>
                                        </ul>
                                    </div>
                                    <div class="attr-detail attr-size">
                                        <strong class="mr-10">Size</strong>
                                        <ul class="list-filter size-filter font-small">
                                            <li><a href="#">S</a></li>
                                            <li class="active"><a href="#">M</a></li>
                                            <li><a href="#">L</a></li>
                                            <li><a href="#">XL</a></li>
                                            <li><a href="#">XXL</a></li>
                                        </ul>
                                    </div>
                                    <div class="bt-1 border-color-1 mt-30 mb-30"></div>
                                    <div class="detail-extralink">
                                        <div class="detail-qty border radius">
                                            <a href="#" class="qty-down"><i class="fi-rs-angle-small-down"></i></a>
                                            <span class="qty-val">1</span>
                                            <a href="#" class="qty-up"><i class="fi-rs-angle-small-up"></i></a>
                                        </div>
                                        <div class="product-extra-link2" >
                                            <button type="button"  th:data-goods-id="${goods.id}"
                                                    class="button add-to-cart-num">添加到购物车</button>
                                            <a aria-label="添加到收藏" th:data-goods-id="${goods.id}"
                                               class="action-btn hover-up add-to-wi">
                                                <i class="fi-rs-heart"></i>
                                            </a>
                                            <a aria-label="查看同类" class="action-btn hover-up"
                                               th:href="@{/vm/front/goods/compare(catId=${goods.categoryId})}">
                                                <i class="fi-rs-shuffle"></i>
                                            </a>
                                        </div>
                                    </div>
                                    <ul class="product-meta font-xs color-grey mt-50">
                                        <li class="mb-5"
                                            th:text="'SKU编号: '+${goods.skuNo}">
                                        </li>
                                        <li class="mb-5"
                                            th:text="'种类: '+${goods.category==null?'全部':goods.category.name}">

                                        </li>
                                        <li>库存状态:<span
                                                class="in-stock text-success ml-5"
                                                th:text="${goods.qty==null?'未知':goods.qty+'件'}"></span>
                                        </li>
                                    </ul>
                                </div>
                                <!-- Detail Info -->
                            </div>
                        </div>
                        <div class="tab-style3">
                            <ul class="nav nav-tabs text-uppercase">
                                <li class="nav-item">
                                    <a class="nav-link active" id="Description-tab" data-bs-toggle="tab"
                                       href="#Description">商品详情描述</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="Additional-info-tab" data-bs-toggle="tab"
                                       href="#Additional-info">额外信息</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="Reviews-tab" data-bs-toggle="tab" href="#Reviews">商品评论
                                        (3)</a>
                                </li>
                            </ul>
                            <div class="tab-content shop_info_tab entry-main-content">
                                <div class="tab-pane fade show active" id="Description">
                                    <div th:utext="${goods.detail==null?'暂无更多详情':goods.detail}"></div>
                                </div>
                                <div class="tab-pane fade" id="Additional-info">
                                    <table class="font-md">
                                        <tbody>
                                        <tr class="stand-up">
                                            <th>Stand Up</th>
                                            <td>
                                                <p>35″L x 24″W x 37-45″H(front to back wheel)</p>
                                            </td>
                                        </tr>
                                        <tr class="folded-wo-wheels">
                                            <th>Folded (w/o wheels)</th>
                                            <td>
                                                <p>32.5″L x 18.5″W x 16.5″H</p>
                                            </td>
                                        </tr>
                                        <tr class="folded-w-wheels">
                                            <th>Folded (w/ wheels)</th>
                                            <td>
                                                <p>32.5″L x 24″W x 18.5″H</p>
                                            </td>
                                        </tr>
                                        <tr class="door-pass-through">
                                            <th>Door Pass Through</th>
                                            <td>
                                                <p>24</p>
                                            </td>
                                        </tr>
                                        <tr class="frame">
                                            <th>Frame</th>
                                            <td>
                                                <p>Aluminum</p>
                                            </td>
                                        </tr>
                                        <tr class="weight-wo-wheels">
                                            <th>Weight (w/o wheels)</th>
                                            <td>
                                                <p>20 LBS</p>
                                            </td>
                                        </tr>
                                        <tr class="weight-capacity">
                                            <th>Weight Capacity</th>
                                            <td>
                                                <p>60 LBS</p>
                                            </td>
                                        </tr>
                                        <tr class="width">
                                            <th>Width</th>
                                            <td>
                                                <p>24″</p>
                                            </td>
                                        </tr>
                                        <tr class="handle-height-ground-to-handle">
                                            <th>Handle height (ground to handle)</th>
                                            <td>
                                                <p>37-45″</p>
                                            </td>
                                        </tr>
                                        <tr class="wheels">
                                            <th>Wheels</th>
                                            <td>
                                                <p>12″ air / wide track slick tread</p>
                                            </td>
                                        </tr>
                                        <tr class="seat-back-height">
                                            <th>Seat back height</th>
                                            <td>
                                                <p>21.5″</p>
                                            </td>
                                        </tr>
                                        <tr class="head-room-inside-canopy">
                                            <th>Head room (inside canopy)</th>
                                            <td>
                                                <p>25″</p>
                                            </td>
                                        </tr>
                                        <tr class="pa_color">
                                            <th>Color</th>
                                            <td>
                                                <p>Black, Blue, Red, White</p>
                                            </td>
                                        </tr>
                                        <tr class="pa_size">
                                            <th>Size</th>
                                            <td>
                                                <p>M, S</p>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="tab-pane fade" id="Reviews">
                                    <!--Comments-->
                                    <div class="comments-area">
                                        <div class="row">
                                            <div class="col-lg-8">
                                                <h4 class="mb-30">Customer questions & answers</h4>
                                                <div class="comment-list">
                                                    <div class="single-comment justify-content-between d-flex">
                                                        <div class="user justify-content-between d-flex">
                                                            <div class="thumb text-center">
                                                                <img th:src="@{/assets/front/imgs/page/avatar-6.jpg}"
                                                                     alt="">
                                                                <h6><a href="#">Jacky Chan</a></h6>
                                                                <p class="font-xxs">Since 2012</p>
                                                            </div>
                                                            <div class="desc">
                                                                <div class="product-rate d-inline-block">
                                                                    <div class="product-rating" style="width:90%">
                                                                    </div>
                                                                </div>
                                                                <p>Thank you very fast shipping from Poland only
                                                                    3days.</p>
                                                                <div class="d-flex justify-content-between">
                                                                    <div class="d-flex align-items-center">
                                                                        <p class="font-xs mr-30">December 4, 2020 at
                                                                            3:12
                                                                            pm </p>
                                                                        <a href="#" class="text-brand btn-reply">Reply
                                                                            <i
                                                                                    class="fi-rs-arrow-right"></i> </a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--single-comment -->
                                                    <div class="single-comment justify-content-between d-flex">
                                                        <div class="user justify-content-between d-flex">
                                                            <div class="thumb text-center">
                                                                <img th:src="@{/assets/front/imgs/page/avatar-7.jpg}"
                                                                     alt="">
                                                                <h6><a href="#">Ana Rosie</a></h6>
                                                                <p class="font-xxs">Since 2008</p>
                                                            </div>
                                                            <div class="desc">
                                                                <div class="product-rate d-inline-block">
                                                                    <div class="product-rating" style="width:90%">
                                                                    </div>
                                                                </div>
                                                                <p>Great low price and works well.</p>
                                                                <div class="d-flex justify-content-between">
                                                                    <div class="d-flex align-items-center">
                                                                        <p class="font-xs mr-30">December 4, 2020 at
                                                                            3:12
                                                                            pm </p>
                                                                        <a href="#" class="text-brand btn-reply">Reply
                                                                            <i
                                                                                    class="fi-rs-arrow-right"></i> </a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--single-comment -->
                                                    <div class="single-comment justify-content-between d-flex">
                                                        <div class="user justify-content-between d-flex">
                                                            <div class="thumb text-center">
                                                                <img th:src="@{/assets/front/imgs/page/avatar-8.jpg}"
                                                                     alt="">
                                                                <h6><a href="#">Steven Keny</a></h6>
                                                                <p class="font-xxs">Since 2010</p>
                                                            </div>
                                                            <div class="desc">
                                                                <div class="product-rate d-inline-block">
                                                                    <div class="product-rating" style="width:90%">
                                                                    </div>
                                                                </div>
                                                                <p>Authentic and Beautiful, Love these way more than
                                                                    ever
                                                                    expected They are Great earphones</p>
                                                                <div class="d-flex justify-content-between">
                                                                    <div class="d-flex align-items-center">
                                                                        <p class="font-xs mr-30">December 4, 2020 at
                                                                            3:12
                                                                            pm </p>
                                                                        <a href="#" class="text-brand btn-reply">Reply
                                                                            <i
                                                                                    class="fi-rs-arrow-right"></i> </a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--single-comment -->
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <h4 class="mb-30">Customer reviews</h4>
                                                <div class="d-flex mb-30">
                                                    <div class="product-rate d-inline-block mr-15">
                                                        <div class="product-rating" style="width:90%">
                                                        </div>
                                                    </div>
                                                    <h6>4.8 out of 5</h6>
                                                </div>
                                                <div class="progress">
                                                    <span>5 star</span>
                                                    <div class="progress-bar" role="progressbar" style="width: 50%;"
                                                         aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%
                                                    </div>
                                                </div>
                                                <div class="progress">
                                                    <span>4 star</span>
                                                    <div class="progress-bar" role="progressbar" style="width: 25%;"
                                                         aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%
                                                    </div>
                                                </div>
                                                <div class="progress">
                                                    <span>3 star</span>
                                                    <div class="progress-bar" role="progressbar" style="width: 45%;"
                                                         aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">45%
                                                    </div>
                                                </div>
                                                <div class="progress">
                                                    <span>2 star</span>
                                                    <div class="progress-bar" role="progressbar" style="width: 65%;"
                                                         aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">65%
                                                    </div>
                                                </div>
                                                <div class="progress mb-30">
                                                    <span>1 star</span>
                                                    <div class="progress-bar" role="progressbar" style="width: 85%;"
                                                         aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">85%
                                                    </div>
                                                </div>
                                                <a href="#" class="font-xs text-muted">How are ratings calculated?</a>
                                            </div>
                                        </div>
                                    </div>
                                    <!--comment form-->
                                    <div class="comment-form">
                                        <h4 class="mb-15">添加评论</h4>
                                        <div class="product-rate d-inline-block mb-30">
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-8 col-md-12">
                                                <form class="form-contact comment_form" action="#" id="commentForm">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="form-group">
                                                            <textarea class="form-control w-100" name="comment"
                                                                      id="comment" cols="30" rows="9"
                                                                      placeholder="Write Comment"></textarea>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <div class="form-group">
                                                                <input class="form-control" name="name" id="name"
                                                                       type="text" placeholder="Name">
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <div class="form-group">
                                                                <input class="form-control" name="email" id="email"
                                                                       type="email" placeholder="Email">
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="form-group">
                                                                <input class="form-control" name="website" id="website"
                                                                       type="text" placeholder="Website">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <button type="submit" class="button button-contactForm">Submit
                                                            Review
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-60">
                            <div class="col-12">
                                <h3 class="section-title style-1 mb-30">相关产品</h3>
                            </div>
                            <div class="col-12">
                                <div class="row related-products">
                                    <div class="col-lg-3 col-md-4 col-12 col-sm-6">
                                        <div class="product-cart-wrap small hover-up">
                                            <div class="product-img-action-wrap">
                                                <div class="product-img product-img-zoom">
                                                    <a th:href="@{/vm/front/shop-product-right}" tabindex="0">
                                                        <img class="default-img"
                                                             th:src="@{/assets/front/imgs/shop/product-2-1.jpg}"
                                                             alt="">
                                                        <img class="hover-img"
                                                             th:src="@{/assets/front/imgs/shop/product-2-2.jpg}"
                                                             alt="">
                                                    </a>
                                                </div>
                                                <div class="product-action-1">
                                                    <a aria-label="Quick view" class="action-btn small hover-up"
                                                       data-bs-toggle="modal" data-bs-target="#quickViewModal
"><i class="fi-rs-search"></i></a>
                                                    <a aria-label="Add To Wishlist" class="action-btn small hover-up"
                                                       th:href="@{/vm/front/shop-wishlist}" tabindex="0"><i
                                                            class="fi-rs-heart"></i></a>
                                                    <a aria-label="Compare" class="action-btn small hover-up"
                                                       th:href="@{/vm/front/shop-compare}" tabindex="0"><i
                                                            class="fi-rs-shuffle"></i></a>
                                                </div>
                                                <div class="product-badges product-badges-position product-badges-mrg">
                                                    <span class="hot">Hot</span>
                                                </div>
                                            </div>
                                            <div class="product-content-wrap">
                                                <h2><a th:href="@{/vm/front/shop-product-right}" tabindex="0">Ulstra
                                                    Bass
                                                    Headphone</a>
                                                </h2>
                                                <div class="rating-result" title="90%">
                                                        <span>
                                                        </span>
                                                </div>
                                                <div class="product-price">
                                                    <span>$238.85 </span>
                                                    <span class="old-price">$245.8</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-4 col-12 col-sm-6">
                                        <div class="product-cart-wrap small hover-up">
                                            <div class="product-img-action-wrap">
                                                <div class="product-img product-img-zoom">
                                                    <a th:href="@{/vm/front/shop-product-right}" tabindex="0">
                                                        <img class="default-img"
                                                             th:src="@{/assets/front/imgs/shop/product-3-1.jpg}"
                                                             alt="">
                                                        <img class="hover-img"
                                                             th:src="@{/assets/front/imgs/shop/product-4-2.jpg}"
                                                             alt="">
                                                    </a>
                                                </div>
                                                <div class="product-action-1">
                                                    <a aria-label="Quick view" class="action-btn small hover-up"
                                                       data-bs-toggle="modal" data-bs-target="#quickViewModal
"><i class="fi-rs-search"></i></a>
                                                    <a aria-label="Add To Wishlist" class="action-btn small hover-up"
                                                       th:href="@{/vm/front/shop-wishlist}" tabindex="0"><i
                                                            class="fi-rs-heart"></i></a>
                                                    <a aria-label="Compare" class="action-btn small hover-up"
                                                       th:href="@{/vm/front/shop-compare}" tabindex="0"><i
                                                            class="fi-rs-shuffle"></i></a>
                                                </div>
                                                <div class="product-badges product-badges-position product-badges-mrg">
                                                    <span class="sale">-12%</span>
                                                </div>
                                            </div>
                                            <div class="product-content-wrap">
                                                <h2><a th:href="@{/vm/front/shop-product-right}" tabindex="0">Smart
                                                    Bluetooth
                                                    Speaker</a></h2>
                                                <div class="rating-result" title="90%">
                                                        <span>
                                                        </span>
                                                </div>
                                                <div class="product-price">
                                                    <span>$138.85 </span>
                                                    <span class="old-price">$145.8</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-4 col-12 col-sm-6">
                                        <div class="product-cart-wrap small hover-up">
                                            <div class="product-img-action-wrap">
                                                <div class="product-img product-img-zoom">
                                                    <a th:href="@{/vm/front/shop-product-right}" tabindex="0">
                                                        <img class="default-img"
                                                             th:src="@{/assets/front/imgs/shop/product-4-1.jpg}"
                                                             alt="">
                                                        <img class="hover-img"
                                                             th:src="@{/assets/front/imgs/shop/product-4-2.jpg}"
                                                             alt="">
                                                    </a>
                                                </div>
                                                <div class="product-action-1">
                                                    <a aria-label="Quick view" class="action-btn small hover-up"
                                                       data-bs-toggle="modal" data-bs-target="#quickViewModal
"><i class="fi-rs-search"></i></a>
                                                    <a aria-label="Add To Wishlist" class="action-btn small hover-up"
                                                       th:href="@{/vm/front/shop-wishlist}" tabindex="0"><i
                                                            class="fi-rs-heart"></i></a>
                                                    <a aria-label="Compare" class="action-btn small hover-up"
                                                       th:href="@{/vm/front/shop-compare}" tabindex="0"><i
                                                            class="fi-rs-shuffle"></i></a>
                                                </div>
                                                <div class="product-badges product-badges-position product-badges-mrg">
                                                    <span class="new">New</span>
                                                </div>
                                            </div>
                                            <div class="product-content-wrap">
                                                <h2><a th:href="@{/vm/front/shop-product-right}" tabindex="0">HomeSpeak
                                                    12UEA
                                                    Goole</a>
                                                </h2>
                                                <div class="rating-result" title="90%">
                                                        <span>
                                                        </span>
                                                </div>
                                                <div class="product-price">
                                                    <span>$738.85 </span>
                                                    <span class="old-price">$1245.8</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-4 col-12 col-sm-6">
                                        <div class="product-cart-wrap small hover-up mb-0">
                                            <div class="product-img-action-wrap">
                                                <div class="product-img product-img-zoom">
                                                    <a th:href="@{/vm/front/shop-product-right}" tabindex="0">
                                                        <img class="default-img"
                                                             th:src="@{/assets/front/imgs/shop/product-5-1.jpg}"
                                                             alt="">
                                                        <img class="hover-img"
                                                             th:src="@{/assets/front/imgs/shop/product-3-2.jpg}"
                                                             alt="">
                                                    </a>
                                                </div>
                                                <div class="product-action-1">
                                                    <a aria-label="Quick view" class="action-btn small hover-up"
                                                       data-bs-toggle="modal" data-bs-target="#quickViewModal
"><i class="fi-rs-search"></i></a>
                                                    <a aria-label="Add To Wishlist" class="action-btn small hover-up"
                                                       th:href="@{/vm/front/shop-wishlist}" tabindex="0"><i
                                                            class="fi-rs-heart"></i></a>
                                                    <a aria-label="Compare" class="action-btn small hover-up"
                                                       th:href="@{/vm/front/shop-compare}" tabindex="0"><i
                                                            class="fi-rs-shuffle"></i></a>
                                                </div>
                                                <div class="product-badges product-badges-position product-badges-mrg">
                                                    <span class="hot">Hot</span>
                                                </div>
                                            </div>
                                            <div class="product-content-wrap">
                                                <h2><a th:href="@{/vm/front/shop-product-right}" tabindex="0">Dadua
                                                    Camera 4K
                                                    2022EF</a></h2>
                                                <div class="rating-result" title="90%">
                                                        <span>
                                                        </span>
                                                </div>
                                                <div class="product-price">
                                                    <span>$89.8 </span>
                                                    <span class="old-price">$98.8</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="banner-img banner-big wow fadeIn f-none animated mt-50">
                            <img class="border-radius-10" th:src="@{/assets/front/imgs/banner/banner-4.png}" alt="">
                            <div class="banner-text">
                                <h4 class="mb-15 mt-40">Repair Services</h4>
                                <h2 class="fw-600 mb-20">We're an Apple <br>Authorised Service Provider</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<footer th:replace="~{front/include::footer}"></footer>
<div th:insert="~{front/include::loader}"></div>
<div th:insert="~{front/include::scripts}"></div>

</body>

</html>